<!-- 装货 -->
<template>
	<view class="list_item" @click="itemClick()">
		<view class="item_top">
			<view class="view_pai"><text class="text_pai">装货单号</text>&nbsp;{{reqQuery.loadNo}}</view>
		</view>

		<view class="item_bottom">
			<view class="bottom_text">
				<view class="text_left">装货日期:</view>
				<view class="text_right">{{reqQuery.loadDate}}</view>
			</view>
			<view class="bottom_text">
				<view class="text_left">托运方名称:</view>
				<view class="text_right">{{reqQuery.carriageName}}</view>
			</view>
			<view class="bottom_text">
				<view class="text_left">危险货物名称:</view>
				<view class="text_right">{{reqQuery.dgsName}}</view>
			</view>
			<view class="bottom_text">
				<view class="text_left">重量:</view>
				<view class="text_right">{{reqQuery.loadWeight || '-'}}吨</view>
			</view>
			<view class="bottom_text">
				<view class="text_left">五必查结果:</view>
				<view class="text_right">{{reqQuery.checkResult == 'N'?'否':'是'}}</view>
			</view>
		</view>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		props: ['reqQuery'],
		data() {
			return {

			}
		},
		mounted() {},
		methods: {
			itemClick() {
				this.$store.commit('setloadFillData', {
					...this.reqQuery,
					changeType: '0'
				})
				this.$goBack(`/pages/dgs_qy/load-goods/load-query/loadEdit`)
			},
		}
	}
</script>

<style lang="scss">
	.list_item {
		border-radius: 10rpx;
		background-color: #FFFFFF;
		margin: 0rpx 20rpx 20rpx 20rpx;


		.item_top {
			display: flex;
			justify-content: space-between;
			// background-color: #E80080;
			height: 80rpx;
			border-radius: 10rpx;

			.view_pai {
				border-left: 5rpx solid $app-color;
				padding-left: 30rpx;
				height: 40rpx;
				// background-color: #07C160;
				margin-top: 30rpx;

				.text_pai {
					font-size: 28rpx;
					font-weight: 700;
				}
			}

			.view_state {
				height: 50rpx;
				border-top-right-radius: 10rpx;
				border-bottom-left-radius: 8rpx;
				padding-left: 5rpx;
				padding-right: 5rpx;
				background-color: $app-color;
				display: flex;
				align-items: center;

				.text_state {
					font-size: 28rpx;
					font-weight: 700;
				}
			}

		}

		.item_line {
			height: 1rpx;
			background-color: #F2F2F2;
			margin-left: 35rpx;
			margin-right: 35rpx;
		}

		.item_center {
			display: flex;
			flex-direction: column;
			padding-left: 35rpx;
			padding-top: 20rpx;
			padding-bottom: 10rpx;

			.center_top {
				display: flex;
				height: 50rpx;
				align-items: center;

				.view_jia {
					width: 45rpx;
					height: 45rpx;
					background-color: #4CAF50;
					border-radius: 45rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					text {
						color: #FFFFFF;
						font-size: 20rpx;
						font-weight: 700;
					}
				}

				.view_ya {
					width: 45rpx;
					height: 45rpx;
					background-color: #2196F3;
					border-radius: 45rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					text {
						color: #FFFFFF;
						font-size: 20rpx;
						font-weight: 700;
					}
				}

				.text_name {
					margin-left: 20rpx;
					font-size: 28rpx;
					font-weight: 700;
				}

				.text_phone {
					margin-left: 30rpx;
					font-size: 28rpx;
					font-weight: 700;
					color: #666666;
				}
			}

			.center_line {
				margin-left: 22rpx;
				height: 15rpx;
				width: 5rpx;
				background-color: #000000;
			}

		}

		.item_bottom {
			display: flex;
			flex-direction: column;
			padding-left: 35rpx;

			.bottom_text {
				display: flex;
				align-items: center;
				padding-top: 10rpx;
				padding-bottom: 10rpx;

				.text_left {
					font-size: 30rpx;
					color: #666666;
				}

				.text_right {
					flex: 1;
					margin-left: 30rpx;
					font-size: 30rpx;
					display: inline-block;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

			}
		}
	}
</style>
